<template>
	<view>
		<!-- 除H5外适用 -->
		<!-- #ifndef H5 -->
		<view class="miniBack">
			<view :style="{height:infoObj.statusBarHeight+'px',width:'100%'}"></view>
			<!-- 导航栏 -->
			<view :style="{height:infoObj.navBarHeight+'px',width:infoObj.navBarWidth+'px'}">
				<view class="mini-nav" v-if="!clearShow">
					<view @tap="backFront()" class="mini-icon">
						<text class="iconfont icon-fanhui1"></text>
					</view>
					<view class="">
						|
					</view>
					<view @tap="backHome()" class="mini-icon">
						<text class="iconfont icon-shouye2"></text>
					</view>
				</view>
			</view>
		</view>
		<!-- #endif -->

		<!-- H5使用 -->
		<!-- #ifdef H5 -->
		<view class="backBar" v-show="!clearShow">
			<view @tap="backFront()">
				<text class="iconfont icon-fanhui1"></text>
			</view>
			<text></text>
			<view @tap="backHome()">
				<text class="iconfont icon-shouye2"></text>
			</view>
		</view>
		<!-- #endif -->

		<view v-show="imgLoadShow" class="loadings">
			<loading :preFlag="true"></loading>
		</view>


		<view v-show="!imgLoadShow">
			<!-- 壁纸 -->
			<!-- 多张壁纸显示 -->
			<view v-if="wallpaperList.length !== 0">
				<swiper @change="change" :indicator-dots="true" :autoplay="isAotuPlay" :circular="true" :interval="4000"
					:duration="500" indicator-color="#fff" indicator-active-color="#66bbad">
					<swiper-item v-for="(item,i) in wallpaperList" :key="i">
						<image @tap="preView()" @load="imgLoad" class="imageSize" :src="item.imgUrl" mode="aspectFill"
							v-if="item.sizeFlag">
						</image>
						<image @tap="preView()" @load="imgLoad" class="image" :src="item.imgUrl" mode="aspectFill"
							v-else></image>
					</swiper-item>
				</swiper>
			</view>
			<!-- 单张壁纸显示 -->
			<view class="singleImg" v-else>
				<image @tap="preView()" @load="imgLoad" class="singleImgSize" :src="imgData.imgUrl" mode="aspectFill"
					v-if="imgData.sizeFlag"></image>
				<image @tap="preView()" @load="imgLoad" class="image" :src="imgData.imgUrl" mode="aspectFill" v-else>
				</image>
			</view>
		</view>


		<!-- 操作栏 -->
		<view class="actionBar" v-if="!clearShow">
			<view @click="actionBar(item)" class="actionItem" v-for="(item,i) in actionList" :key="i">
				<text v-if="wallpaperList.length !== 0" class="iconfont"
					:class="[item.icon,i === 1 && handleLike ? 'color-red' : '']"></text>
				<text v-else class="iconfont"
					:class="[item.icon,i === 1 && imgData.likeFlag ? 'color-red' : '']"></text>
				<p>{{item.text}}</p>

			</view>
			<button class="botton" open-type="share">分享</button>
		</view>

		<view class="" v-if="downloadShow">
			<!-- 下载加载动画 -->
			<view class="container">
				<span></span>
				<span></span>
				<span></span>
				<span></span>
			</view>
			<!-- 下载加载文字 -->
			<view class="download-text">正在下载</view>
		</view>

	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				// 壁纸数据
				wallpaperList: [],
				imgData: {},
				actionList: [{
						icon: 'icon-fanhui1',
						text: '返回'
					},
					{
						icon: 'icon-xihuan-01',
						text: '点赞',
					},
					{
						icon: 'icon-xiazai',
						text: '下载'
					},
					{
						icon: 'icon-a-121-quanping',
						text: '清屏'
					},
					{
						icon: 'icon-fenxiang2',
						text: '分享'
					},
				],
				// 判断是否清屏
				clearShow: false,
				// 判断是否点赞
				likeIndex: 0,
				// 是否自动轮播
				isAotuPlay: true,
				infoObj: {},
				// 当前壁纸索引
				imgIndex: 0,
				// 是否显示下载动画
				downloadShow: false,
				imgLoadShow: true,
			};
		},
		computed: {
			...mapState('phoneInfo', ['phoneObj']),
		},
		onLoad() {
			// 导航栏高度
			this.infoObj = this.$store.state.phoneInfo.phoneObj
			// 接收跳转来页面传递的参数
			this.$nextTick(() => {
				this.getOpenerEventChannel().once('imgData', res => {
					this.imgData = res
				})
				this.getOpenerEventChannel().once('wallPaperData', res => {
					this.wallpaperList = res
				})
			})

		},
		onShareAppMessage(res) {
			return {
				type: 0,
				mpId: 'wxd8678e1aa852b832',
				title: 'Snow壁纸',
				desc: '高清壁纸免费下载',
				path: '/pages/index/index',
				imageUrl: 'https://snowcyans.gitee.io/static-warehouse/static/jx5.jpg'
			}
		},
		methods: {
			// 图片加载完成事件
			imgLoad(e) {
				this.imgLoadShow = false
			},
			// 图片切换触发
			change(e) {
				this.imgIndex = e.detail.current
				this.likeIndex = e.detail.current
			},
			// 返回上一页
			backFront() {
				uni.navigateBack({
					delta: 1
				})
			},
			// 返回主页
			backHome() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			preView() {
				this.clearShow = false
			},

			// 获取图片信息并保存到相册或本地
			// imageInfoSave(url) {
			// 	//开启下载加载动画
			// 	this.downloadShow = true
			// 	this.isAotuPlay = false
			// 	uni.getImageInfo({
			// 		src: url,
			// 		success: (result) => {
			// 			uni.saveImageToPhotosAlbum({
			// 				filePath: result.path,
			// 				success: () => {
			// 					this.isAotuPlay = true
			// 					this.downloadShow = false
			// 					uni.showToast({
			// 						icon: 'success',
			// 						title: '已保存到相册'
			// 					})
			// 					this.$store.commit('user/downloadList', this.wallpaperList[this
			// 						.imgIndex])
			// 				},
			// 				fail: () => {
			// 					this.isAotuPlay = true
			// 					this.downloadShow = false
			// 					uni.showToast({
			// 						icon: 'none',
			// 						title: '已取消下载壁纸'
			// 					})
			// 				}
			// 			})
			// 		},
			// 		fail: (err) => {
			// 			this.downloadShow = false
			// 			console.log(err);
			// 		}
			// 	})
			// },

			// 获取授权下载壁纸 微信小程序
			// downloadImage() {
			// 	uni.authorize({
			// 		scope: 'scope.writePhotosAlbum',
			// 		success: (res) => {
			// 			if (this.wallpaperList.length !== 0) {
			// 				// 下载的是轮播壁纸中的一张
			// 				this.imageInfoSave(this.wallpaperList[this.imgIndex].imgUrl)

			// 			} else {
			// 				// 下载的是单张展示壁纸
			// 				this.imageInfoSave(this.imgData.imgUrl)
			// 			}
			// 		},
			// 		fail: (err) => {
			// 			uni.showModal({
			// 				title: '提示',
			// 				content: '需要获取相册权限，请前往设置页面打开',
			// 				confirmColor: '#24bfa5',
			// 				cancelColor: '#959595',
			// 				success: (res) => {
			// 					if (res.confirm) {
			// 						uni.openSetting({
			// 							success: (settingdata) => {
			// 								if (settingdata.authSetting[
			// 										"scope.writePhotosAlbum"
			// 									]) {
			// 									console.log('获取权限成功');

			// 								}
			// 							},
			// 							fail: (err2) => {
			// 								console.log(err2);
			// 							}
			// 						})
			// 					} else {
			// 						uni.showToast({
			// 							icon: 'none',
			// 							title: '取消授权'
			// 						})
			// 					}
			// 				}
			// 			})
			// 		}
			// 	})
			// },

			// 下载壁纸 小程序
			downloadWallPaper(url) {
				//开启下载加载动画
				this.downloadShow = true
				// 停止轮播
				this.isAotuPlay = false
				uni.getImageInfo({
					src: url,
					success: (result) => {
						uni.saveImageToPhotosAlbum({
							filePath: result.path,
							success: () => {
								//关闭下载加载动画
								this.downloadShow = false
								//继续轮播
								this.isAotuPlay = true
								uni.showToast({
									icon: 'success',
									title: '已保存到相册'
								})
							}
						})
					}
				})
			},

			// 下载壁纸 H5
			downloadHFive(url) {
				// // 创建一个Blob对象
				// const blob = new Blob([url]);
				// // 创建一个a标签用于下载
				// const downloadImg = document.createElement("a");
				// // 创建下载的链接 window 自带下载 
				// const href = window.URL.createObjectURL(blob);
				// // 挂载
				// downloadImg.href = href;
				// // 下载过后的文件名
				// downloadImg.download = decodeURI('SnowCyanS壁纸.jpg');
				// // 将创建后的a标签挂载到body的dom节点上
				// document.body.appendChild(downloadImg);
				// // a标签点击下载
				// downloadImg.click();
				// // 下载完成后移除元素
				// document.body.removeChild(downloadImg);
				// // 释放掉blob对象
				// window.URL.revokeObjectURL(href);
				window.open(url)
			},
			// 操作栏
			actionBar(item) {
				if (item.text === '返回') {
					uni.navigateBack({
						delta: 1
					})
				} else if (item.text === '点赞') {
					if (!this.imgLoadShow) {
						// 数组长度不为0代表是壁纸主题(多张壁纸)
						if (this.wallpaperList.length !== 0) {
							this.wallpaperList.filter((item, i) => {
								if (i === this.likeIndex) {
									if (item.likeFlag) {
										item.likeFlag = false
									} else {
										item.likeFlag = true
										this.$store.commit('user/likeList', item)
									}
									console.log(item.likeFlag);
								}
							})
						} else {
							// 否则是单张壁纸
							if (this.imgData.likeFlag) {
								this.imgData.likeFlag = false
							} else {
								this.imgData.likeFlag = true
								this.$store.commit('user/likeList', this.imgData)
							}

						}
					} else {
						uni.showToast({
							icon: 'none',
							title: '无可点赞的壁纸'
						})
					}
				} else if (item.text === '下载') {
					// #ifdef MP-WEIXIN
					// this.downloadImage()
					if (this.wallpaperList.length !== 0) {
						this.downloadWallPaper(this.wallpaperList[this.imgIndex].imgUrl)
					} else {
						this.downloadWallPaper(this.imgData.imgUrl)
					}
					// #endif

					// #ifdef H5
					if (this.wallpaperList.length !== 0) {
						this.downloadHFive(this.wallpaperList[this.imgIndex].imgUrl)
					} else {
						this.downloadHFive(this.imgData.imgUrl)
					}
					// #endif

				} else if (item.text === '清屏') {
					this.clearShow = true
				} else {}
			}
		},
		computed: {
			// 多张壁纸判断当前壁纸是否点赞
			handleLike() {
				if (this.wallpaperList.length !== 0) {
					return this.wallpaperList[this.likeIndex].likeFlag
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		backdrop-filter: blur(100px); //毛玻璃效果
		background-color: #151515;
	}

	.loadings {
		width: 100vw;
		height: 100vh;
	}

	// 加载中
	.loading {
		width: 100vw;
		height: 100vh;

		// transform: translate(-50%);
		.loader {
			position: relative;
			top: 45%;
			left: 45%;
			transform: translate(-50%, -50%);
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			background: linear-gradient(#ee280e, #15a0f7, #6ed15a);
			animation: animate7712 1.2s linear infinite;
		}

		@keyframes animate7712 {
			0% {
				transform: rotate(0deg);
			}

			100% {
				transform: rotate(360deg);
			}
		}

		.loader span {
			position: absolute;
			width: 100%;
			height: 100%;
			border-radius: 50%;
			background: linear-gradient(#ee280e, #15a0f7, #5ad15a);
		}

		.loader:after {
			content: '';
			position: absolute;
			top: 7rpx;
			left: 7rpx;
			right: 7rpx;
			bottom: 7rpx;
			background: #333;
			border: solid #333 7rpx;
			border-radius: 50%;
		}

		.loader span:nth-child(1) {
			filter: blur(5rpx);
		}

		.loader span:nth-child(2) {
			filter: blur(10rpx);
		}

		.loader span:nth-child(3) {
			filter: blur(25rpx);
		}

		.loader span:nth-child(4) {
			filter: blur(50rpx);
		}
	}

	// 隐藏分享按钮
	.botton {
		position: absolute;
		bottom: 0;
		right: 0;
		opacity: 0;
	}

	// 返回栏
	// 除h5端适用
	/*#ifndef H5*/
	.miniBack {
		position: fixed;
		top: 20rpx;
		left: 40rpx;
		z-index: 9;

		.mini-nav {
			display: flex;
			justify-content: space-around;
			align-items: center;
			backdrop-filter: blur(3px); //毛玻璃效果
			border: 1rpx solid #e6e6e6;
			border-radius: 35rpx;
			width: 170rpx;
			padding: 8rpx;

			.mini-icon {
				width: 100%;
				height: 35rpx;
				line-height: 35rpx;
				padding: 7rpx;
				text-align: center;

				.iconfont {
					font-size: 38rpx;
				}

			}

		}
	}

	/*#endif*/

	// H5端适用
	/*#ifdef H5*/
	.backBar {
		position: fixed;
		top: 20rpx;
		left: 40rpx;
		width: 20%;
		margin: 20rpx;
		border-radius: 50rpx;
		backdrop-filter: blur(3px); //毛玻璃效果
		padding: 8rpx;
		z-index: 1;
		border: 1rpx solid #e6e6e6;
		display: flex;
		justify-content: space-around;

		view {
			width: 100%;
			height: 35rpx;
			line-height: 35rpx;
			padding: 7rpx;
			text-align: center;
		}

		text {
			&:first-child {
				font-size: 38rpx;
			}

			&:nth-child(2) {
				color: #dcdcdc;
				width: 1rpx;
				height: 45rpx;
				background-color: #dcdcdc;
			}

			&:last-child {
				font-size: 32rpx;
			}
		}
	}

	/*#endif*/


	swiper {
		width: 100vw;
		height: 100vh;
	}

	// 壁纸主题样式
	.imageSize {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 100%;
		height: 50%;
		will-change: transform;
	}

	.image {
		width: 100vw;
		height: 100vh;
		will-change: transform;
	}

	// 单张壁纸样式
	.singleImg {
		width: 100vw;
		height: 100vh;

		.singleImgSize {
			width: 100%;
			height: 50%;
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

	}

	// 操作栏
	.actionBar {
		position: fixed;
		bottom: 70rpx;
		left: 60rpx;
		width: 80%;
		padding: 15rpx;
		border-radius: 50rpx;
		backdrop-filter: blur(3px); //毛玻璃效果
		border: 1rpx solid #fff;
		display: flex;
		justify-content: space-around;
		align-items: center;

		.actionItem {
			text-align: center;

			text {
				font-size: 34rpx;
			}

			p {
				margin-top: 5rpx;
				font-size: 20rpx;
			}
		}

	}

	// 下载加载动画
	.container {
		position: absolute;
		top: 50%;
		left: 50%;
		border-radius: 50%;
		height: 96rpx;
		width: 96rpx;
		animation: rotate_3922 1s linear infinite;
		background-color: #9b59b6;
		background-image: radial-gradient(circle farthest-corner at 10% 20%, rgba(243, 107, 255, 1.0) 17.8%, rgba(2, 245, 255, 1) 100.2%);
	}

	.container span {
		position: absolute;
		border-radius: 50%;
		height: 100%;
		width: 100%;
		background-color: #9b59b6;
		background-image: radial-gradient(circle farthest-corner at 10% 20%, rgba(243, 107, 255, 1.0) 17.8%, rgba(2, 245, 255, 1) 100.2%);
	}

	.container span:nth-of-type(1) {
		filter: blur(5rpx);
	}

	.container span:nth-of-type(2) {
		filter: blur(10rpx);
	}

	.container span:nth-of-type(3) {
		filter: blur(25rpx);
	}

	.container span:nth-of-type(4) {
		filter: blur(50rpx);
	}

	.container::after {
		content: "";
		position: absolute;
		top: 10rpx;
		left: 10rpx;
		right: 10rpx;
		bottom: 10rpx;
		background-color: #fff;
		border: solid 5rpx #ffffff;
		border-radius: 50%;
	}

	@keyframes rotate_3922 {
		from {
			transform: translate(-50%, -50%) rotate(0deg);
		}

		to {
			transform: translate(-50%, -50%) rotate(360deg);
		}
	}

	// 下载加载文字
	.download-text {
		position: absolute;
		top: 55.5%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 1;
		font-size: 30rpx;

	}
</style>